<!doctype html>
<html lang="zh-Hans-CN">

<head>
	<title>数据的本地存储</title>
	<meta charset="utf-8">
	<meta name="keywords" content="">
	<meta name="description" content="">
	<meta name="author" content="chen">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<meta http-equiv="X-UA-Compatible" content="ie=edge, chrome=1">
	<!--<link rel="stylesheet" type="css/text" media="screen and ( min-width: 1200px )" href="">-->
	<link rel="stylesheet" type="text/css" media="screen" href="">
	<script defer="defer" src=""></script>
	<style>
		/*@import url("css/name.css") screen and ( min-width: 1200px );*/
	</style>
</head>

<body>
	<input id='ipt' type='text'>
	<input id='btn' type='button' value='保存'>
	<input id='remove' type='button' value='移除'>
	<script>
		let btn = document.getElementById('ipt');
		let btn = document.getElementById('btn');
		let btn = document.getElementById('remove');

		// 判断是否已经存储了此键值
		if(window.sessionStorage.getItem('user')) {
			txt.value = window.sessionStorage.getItem('user');
		}

		// 否则存储此键值
		btn.onclick = function() {
			// 临时存储: 页面关闭后数据消失
			window.sessionStorage.setItem('user', txt.value);

			// 永久存储: 页面关闭后重新打开可以获取数据
			window.localStorage.setItem('user', txt.value);
		}

		// 删除已经存储的数据的方法:
		remove.onclick = function() {
			window.localStorage.removeItem('user');
		}

		// 注意: 
		// 在Application页可以查看存储的数据信息
		// 只能以键值对的形式存储数据
		// 清除缓存会抹除所有的存储数据
		// 浏览器的无痕模式无法存储数据
	</script>
</body>

</html>